<template>
	<view class="goods-item">
		<!-- #ifdef H5 -->
			<img class="image" v-lazy="itemInfo.showLarge.img">
		<!-- #endif -->
		
		<!-- #ifndef H5 -->
			<image class="image" :src="itemInfo.showLarge.img" mode="widthFix"></image>
		<!-- #endif -->
		<view class="desc-info">
			<view class="title">{{itemInfo.title}}</view>
			<view class="info">
				<text class="price">{{itemInfo.price}}</text>
				<image class="icon" src="/static/common/favor.png" mode=""></image>
				<text class="cfav">{{itemInfo.cfav}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		itemInfo: {
			type: Object,
			default: () => {}
		}
	})
</script>

<style lang="scss">
.goods-item {
	box-sizing: border-box;
	padding: 10rpx;
	
	.image {
		width: 100%;
		border-radius: 10rpx;
	}
	
	.desc-info {
		.title {
			@include textEllipsis();
			font-size: 28rpx;
		}
		
		.info {
			text-align: center;
			font-size: 26rpx;
			
			.icon {
				margin-left: 15rpx;
				vertical-align: bottom;
				width: 30rpx;
				height: 30rpx;
			}
			
			.price {
				color: $gTintColor;
			}
			
			.cfav {
				margin-left: 3rpx;
			}
		}
	}
}
</style>